<template>
  <div>
    <h2>总人数: {{ count }}</h2>
    <button @click="sub">减少-1</button>

    <transition-group tag="ul" name="stuList" :css="false"  @leave="leave">
      <li v-for="student in students" :key="student.stuNumber">{{ student.name }}</li>
    </transition-group>
  </div>
</template>

<script>
import stuData from '../assets/js/data'
import gsap from 'gsap'
export default {
  data() {
    return {
      students: stuData
    }
  },
  computed: {
    count() {
      return this.students.length
    }
  },
  methods: {
    sub() {
      this.students.splice(Math.floor(Math.random() * this.count), 1)
    },
   leave(el, done) {
     gsap.to(el, {
       opacity: 0,
       height: 0,
       duration: 0.5,
       onComplete: done
     })
   }
  },
}
</script>

<style scoped>
.stuList-enter-from, .stuList-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.stuList-enter-active, .stuList-leave-active {
  transition: all 1s ease;
}
.stuList-leave-active {
  position: absolute;
}
.stuList-move {
  transition: transfrom 1s ease;
}
</style>